<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>恢复部门</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/frame/layui/css/layui.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/frame/static/css/style.css">
</head>
<body class="body">
	<!-- 工具集 -->
	<div class="my-btn-box">
		<span class="fl"> <a
			class="layui-btn layui-btn-danger radius btn-delect"
			id="btn-delete-all">批量删除</a> <a class="layui-btn btn-add btn-default"
			id="btn-add">添加</a> <a class="layui-btn btn-add btn-default"
			id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
		</span> <span class="fr"> <span class="layui-form-label">搜索条件：</span>
			<div class="layui-input-inline">
				<input type="text" autocomplete="off" name="sname"
					placeholder="请输入搜索部门" class="layui-input">
			</div>
			<button id="btn-select" class="layui-btn mgl-20">查询</button>
		</span>
	</div>
	<!-- 表格 -->
	<table id="test" class="layui-table" lay-filter="dept_table"></table>

	<script type="text/javascript"
		src="${pageContext.request.contextPath }/frame/layui/layui.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/js/index.js"></script>
	<script>
		layui.use([ 'element', 'table', 'jquery', 'layer', 'form' ],
				function() {
					var $ = layui.jquery,
					table = layui.table, 
					layer = layui.layer;
					//设置表头
					var clos = [ [ {
						checkbox : true,
						sort : true,
						fixed : true,
						space : true
					}, {
						field : 'did',
						title : '编号',
						align : 'center',
						width : 100
					}, {
						field : 'dname',
						title : '部门名称',
						align : 'center',
						width : 160
					}, {
						field : 'dremark',
						title : '部门描述',
						align : 'center',
						width : 500
					}, {
						fixed : 'right',
						title : '编辑',
						width : 200,
						align : 'center',
						toolbar : '#barDemo'//这里的toolbar值是模板元素的选择器
					} ] ];

					//方法级别渲染表格
					var tableIns = table.render({
						elem : '#test',
						height : 500,
						cols : clos,
						url : '${pageContext.request.contextPath}/deptAction_findByPage.action?dis=0',
						method : 'post',
						page : true,
						limits : [ 5, 10, 20 ],
						limit : 5, //默认采用5
						loading : false, //是否显示加载 
					});

					//监听工具条
					table.on('tool(dept_table)',function(obj) {
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值
						var tr = obj.tr; //获得当前行 tr 的DOM对象

						if (layEvent === 'restore') { //
							restore_dept(obj);
						}
					});
					function restore_dept(obj) {
		                var data = obj.data;
		                var info = '确定要恢复 <a style="color: red">' + data.dname + '</a> 吗？';

		                layer.confirm(info, {icon: 3, title: '恢复部门'}, function (index) {
		                    layer.close(index);
		                    //向服务端发送删除指令
		                    $.post('${pageContext.request.contextPath}/deptAction_restoreDept.action', {did: data.did},
		                        function (result) {
		                            if (result == 'success') {
		                            	layer.alert('恢复成功');
										obj.del(); //删除对应行（tr）的DOM结构
		                                //重新加载数据
		                                tableIns.reload();
		                            } else {
		                                layer.alert('恢复失败');
		                            }

		                        });
		                });
		            }
					// 刷新
					$('#btn-refresh').on('click', function() {
						tableIns.reload();
					});
				});
	</script>
	<%--工具栏设定,当id为0,就是管理规划部时，无法操作--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="restore"><i class="layui-icon">&#xe642;</i>恢复部门</a>
</script>
</body>
</html>
